<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ajax-upload</title>
    <link href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.css" rel="stylesheet">
    <script type="text/javascript" src="_static_resource/js/jquery.min.js"></script>
    <style>
        .progress-area {
            padding: 20px;
        }
    </style>
</head>

<body>
    <div class="">
        <p>文件上传</p>
        <div>
            <form>
                <input type="file" name="file[]" id="file" />
                <input type="file" name="file[]" id="file2" />
                <input type="file" name="file[]" id="file3" />
                <input type="file" name="file[]" id="file4" />
                <input type="name" name="name">
            </form>

            <div>
                <p>图片预览（如果上传文件时图片）</p>
                <div class="img-preview">
                </div>
            </div>
            <button id="upload">上传</button>
            <!-- <button id="btn">终止上传</button> -->
            <div class="progress-area">
                进度
                <div class="progress">
                    <div class="progress-bar" id="progress" role="progressbar" aria-valuenow="25" aria-valuemin="0"
                        aria-valuemax="100">0%</div>
                </div>
                <div>
                    <p id="time"></p>
                </div>
            </div>
        </div>
    </div>
    <script>
        (function () {
            // 'use strict';

            var file = document.querySelector('#file');
            var upload = document.querySelector('#upload');
            var progress = document.querySelector('#progress');
            var time = document.querySelector('#time');
            // var imgPreview = document.querySelector('.img-preview');
            var xhr = new XMLHttpRequest();
            var loaded = 0, ot = 0, total = 0, oloaded = 0;//;
            upload.addEventListener('click', uploadFile, false);
            // file.addEventListener('change', previewImage, false);
            // 点击上传
            function uploadFile(event) {
                var formdata = new FormData($("form")[0]);
                //上传进程中，实时监控上传进度
                xhr.upload.onprogress = setProgress;
                //上传，上传结束后
                xhr.onload = uploadSuccess;
                xhr.open('post', '/index/test/test', true);
                xhr.send(formdata);
            }
            // 成功上传
            function uploadSuccess(event) {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    setTimeout(() => {
                        alert('上传成功')
                    }, 1000)
                }
            }
            // 进度条
            function setProgress(event) {
                // event.total是需要传输的总字节，event.loaded是已经传输的字节。如果event.lengthComputable不为真，则event.total等于0
                if (event.lengthComputable) {
                    loaded = event.loaded;
                    total = event.total;
                    var complete = (event.loaded / event.total * 100).toFixed(1);
                    progress.innerHTML = Math.round(complete) + "%";
                    progress.style.width = complete + '%';
                }
                var time = document.getElementById("time");
                var nt = new Date().getTime();//获取当前时间
                var pertime = (nt - ot) / 1000; //计算出上次调用该方法时到现在的时间差，单位为s
                ot = new Date().getTime(); //重新赋值时间，用于下次计算
                var perload = event.loaded - oloaded; //计算该分段上传的文件大小，单位b      
                oloaded = event.loaded;//重新赋值已上传文件大小，用以下次计算
                //上传速度计算
                var speed = perload / pertime;//单位b/s
                var bspeed = speed;
                var units = 'b/s';//单位名称
                if (speed / 1024 > 1) {
                    speed = speed / 1024;
                    units = 'k/s';
                }
                if (speed / 1024 > 1) {
                    speed = speed / 1024;
                    units = 'M/s';
                }
                speed = speed.toFixed(1);
                //剩余时间
                var resttime = ((event.total - event.loaded) / bspeed).toFixed(1);
                time.innerHTML = '传输速度：' + speed + units + '，剩余时间：' + resttime + 's';
                // if(bspeed==0) time.innerHTML = '上传已取消';
            }
            xhr.onloadstart = function () {
                console.log("上传开始");
            }
            xhr.ontimeout = function () {
                console.log('上传超时.');
            }
            // xhr.timeout = 50000; // 默认为0 没有时间限制
            // xhr.onabort = function(){
            //   console.log("The transfer has been canceled by the user.");
            // }
            // xhr.onerror = function(){
            //   console.log("上传错误，可能是断网了，也可能是断请求服务了.");  // 这里存在异步传输问题
            //   return
            // }
            xhr.onloadend = function () {
                console.log("请求结束"); // 发送上传的请求，至于有没有上传成功，不清楚，可能失败 成功，这里只是请求结束了
            }
            // +++++++++++++++++++++++++++++++++++++++++++
        })();
    </script>
</body>

</html>